<template>
  <el-card class="box-card">
    <div class="news_header">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane :label="`${item.label}（${item.num}）`" :name="item.name" v-for="item in tabsList" :key="item.label"></el-tab-pane>
      </el-tabs>
      <MainSearchForm ref="supplierFormRef" :formList="formList" :formValue="formValue" @formReset="formChange" @formSearch="formChange"></MainSearchForm>
      <!-- <el-button size="mini" type="primary" class="add-btn" @click="addNews">新增</el-button> -->
    </div>
    <div class="" style="min-height: 600px">
      <MainTable
        ref="orderTable"
        :loading="listLoading"
        :columns="columns"
        :tableData="tableData"
        showSelection
        @selection-change="handleSelectionChange"
      >
        <template v-slot:audit_status="{ row }">
          <span :style="{ color: getStatusText(row.audit_status, 1) }">{{ getStatusText(row.audit_status, 2) }}</span>
        </template>
        <el-table-column label="操作" width="200">
          <template slot-scope="scope">
            <MainLink v-if="!scope.row.audit_status" color="#E27C21" title="审核" @linkClick="linkClick(scope.row, 2)"></MainLink>
            <MainLink title="查看" @linkClick="linkClick(scope.row, 1)"></MainLink>
          </template>
        </el-table-column>
      </MainTable>
    </div>

    <div class="pagination-right">
      <MainPagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout=" ->,total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </MainPagination>
    </div>
  </el-card>
</template>

<script>
import { $http } from "@/api/index";
import MainTable from '@/components/MainTable/table.vue'
import { joinData } from '../MockData'
const { columns, formList, formValue, tabsList } = joinData
export default {
  name: "news",
  components: {
    MainTable
  },
  data() {
    return {
      formList,
      formValue,
      tableData: [],
      currentPage: 1,
      pageSize: 20,
      total: 0,
      // 勾选的数据
      multipleSelection: [],
      // 新闻日期
      listLoading: false,
      columns,
      tabsList,
      activeName: 'all'
    };
  },
  activated() {
    this.getTabsNum();
    this.getData();
  },

  methods: {
    linkClick(row, type) {
      this.$router.push({
        path: '/supplier/joindetail',
        query: {
          id: row.id,
          type,
          status: 2
        }
      })
    },
    //  表单搜索
    formChange() {
      this.currentPage = 1
      this.pageSize = 20
      this.getData()
    },
    getData() {
      this.listLoading = true;
      let data = {
        page: this.currentPage,
        page_size: this.pageSize,
        ...this.formValue,
        audit_status: this.activeName === 'all' ? '' : this.activeName
      };
      $http('/Supplier/supplier-join-list', data).then(
        (res) => {
          this.listLoading = false;
          this.tableData = res.data.list;
          this.total = res.data.total;
        },
        (err) => {
          console.log(err);
        }
      );
    },
    //  获取标签页统计数据
    getTabsNum() {
      $http('/Supplier/supplier-join-total').then(
        (res) => {
          if(res.errcode == 0) {
            this.tabsList.forEach(el => {
              el.num = res.data[el.key]
            })
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    // 勾选的数据
    handleSelectionChange(val) {
      console.log("val", val);
      this.multipleSelection = val;
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },
    handleClick() {
      this.$refs.supplierFormRef.getFormRefs().resetFields();
      this.formChange()
    },
    //  表格-状态转化
    getStatusText(status, type) {
      const statusObj = {
        0: {
          text: '待审核',
          color: '#E27C21'
        },
        1: {
          text: '通过',
          color: '#03A98E'
        },
        2: {
          text: '拒绝',
          color: '#999999'
        },
      }
      return type === 1 ? statusObj[status].color : statusObj[status].text
    }
  },
  created() {
  },
};
</script>
<style lang="scss" scoped>
@import '../index.scss';
.box-card {
  /deep/.el-card__body {
    padding: 0 20px 20px;
  }
}
</style>
